<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>

<body>
<div id="hello-vue" class="demo">
  {{selOption}}
  <select name="" id=""  @change="changeVal($event)" v-model="selOption">
    <template v-for="(site, index) in sites">
      <option v-if="index == 2" :value="index" selected>{{site.name}} {{site.url}}</option>
      <option v-else v-bind:value="index">{{site.name}} {{site.url}} </option>
    </template>
  </select>
</div>

<script>
const app =  Vue.createApp({
  data() {
    return {
      selOption: 2,
      sites:[
        {name:'baidu',url:"www.baidu.com"},
        {name:'tengxun',url:"www.qq.com"},
        {name:'ali',url:"www.ali.com"},
      ]
    }
  },
  methods:{
    changeVal:function(event){
            this.selOption = event.target.value;
            alert("你选中了"+this.selOption);
        }
  }
}).mount('#hello-vue')

</script>
</body>
</html>
